<template>
  <div class="related-video-card">
    <div class="thumbnail" @click="playDirectly">
      <img :src="video.thumbnail" :alt="video.title">
      <span class="duration">{{ formatDuration(video.duration) }}</span>
      <div class="play-directly-overlay">
        <el-icon><VideoPlay /></el-icon>
      </div>
    </div>
    <div class="video-info" @click="goToVideo">
      <h4 class="title">{{ video.title }}</h4>
      <div class="channel-name">{{ video.user?.username || '未知用户' }}</div>
      <div class="stats">
        <span>{{ formatViews(video.views || 0) }} 次观看</span>
        <span>•</span>
        <span>{{ formatDate(video.createdAt) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { formatDuration, formatViews, formatDate } from '@/utils/formatters';
import { VideoPlay } from '@element-plus/icons-vue';

const props = defineProps({
  video: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['play-directly']);

const router = useRouter();

const goToVideo = () => {
  router.push(`/video/${props.video._id}`);
};

// 直接播放视频而不跳转页面
const playDirectly = () => {
  // 确保传递完整的视频对象，包括所有格式信息
  if (!props.video) {
    console.error('相关视频数据为空');
    return;
  }
  
  if (!props.video.formats || props.video.formats.length === 0) {
    console.warn('相关视频没有格式信息:', props.video.title);
  }
  
  console.log('点击播放相关视频:', props.video.title);
  emit('play-directly', props.video);
};

</script>

<style scoped>
.related-video-card {
  display: flex;
  margin-bottom: 12px;
  cursor: pointer;
}

.thumbnail {
  position: relative;
  width: 168px; /* 推荐视频缩略图宽度 */
  height: 94px; /* 16:9 比例 */
  flex-shrink: 0;
  margin-right: 8px;
  background-color: #f0f0f0; /* 占位背景色 */
  border-radius: 4px;
  overflow: hidden;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 2px;
}

.play-directly-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.play-directly-overlay .el-icon {
  font-size: 28px;
  color: #fff;
}

.thumbnail:hover .play-directly-overlay {
  opacity: 1;
}

.video-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden; /* 防止文字溢出 */
}

.title {
  font-size: 14px;
  font-weight: 500;
  color: #0f0f0f;
  margin: 0 0 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.channel-name,
.stats {
  font-size: 12px;
  color: #606060;
  line-height: 1.4;
}

.channel-name {
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats span {
  margin-right: 4px;
}
</style>